<template>
    <div style="height: 100%;">
        <!-- 维度列表 -->
        <div class="macro">
            <div class="macro_left">
                <div class="sionality" @click="dimensionBtn()">
                    <el-icon :size="16" style="margin-right: 6px;">
                        <Plus />
                    </el-icon>
                    新增维度
                </div>
                <div class="sionaBox">
                    <div class="sionalist" v-for="(item, index) in modelWdList" :key="index"
                        @click="modelWdBtn(item, index)" :class="[sionatype == index ? 'sionapitch' : '']"
                        v-if="modelWdList.length > 0">
                        <div style="flex: 1;margin-right: 4px;">
                            <span></span>
                            <span style="flex: 1;">{{ item.wdName }}</span>
                            <span>{{ item.wdWeight }}%</span>
                        </div>
                        <el-dropdown trigger="click" @command="handleCommand($event, index)">
                            <el-icon class="surplus" :color="sionatype == index ? '#0084FF' : '#4E5969'">
                                <MoreFilled />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="item in operateList" :key="item.value"
                                        :command="item.value">
                                        {{ item.label }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <div class="temporary" v-else>
                        暂无维度
                    </div>
                </div>
                <div class="sionafoot">
                    <span>权重合计</span>
                    <span>{{ weightNum }}%</span>
                </div>
            </div>
            <div class="macro_right" v-if="sionatype !== null">
                <!-- 指标库 -->
                <div class="measure">
                    <div class="indiBox-top">
                        <div>指标库</div>
                    </div>
                    <PublicTree ref="treeRef" :nodeKey="'targetId'" :data="treedata" :defaultProps="defaultProps"
                        :checkbox="true" :expandAll="true" :checkedAll="checkedAll" @checkClick="checkClick"
                                :check-strictly="true" />
                </div>
                <!-- 已选指标 -->
                <div class="selecdex">
                    <div class="indiBox" v-if="sionatype !== null && modelWdList[sionatype].targetList.length > 0">
                        <div class="indiBox-top">
                            <div>已选指标</div>
                            <div>
                                <span>权重合计</span>
                                <span>{{ weightTotal }}%</span>
                            </div>
                        </div>
                        <el-form :model="modelWdList[sionatype].targetList" ref="targetTableRef" :rules="rules">
                            <div class="indiMina">
                                <div v-for="(item, index) in modelWdList[sionatype].targetList" :key="index">
                                    <div class="indiMina_header">
                                        <div>{{ item.targetName }}</div>
                                        <div>
                                            <span>权重</span>
                                            <el-input v-model="item.targetWeight"
                                                @input="targetWeightInput($event, index)"
                                                @change="targetWeighChange($event, index)"
                                                style="width: 80px;margin: 0 10px;">
                                                <template #suffix>%</template>
                                            </el-input>
                                            <!-- <el-icon :size="20" color="#86909C" style="cursor: pointer;">
                                                <CloseBold />
                                            </el-icon> -->
                                        </div>
                                    </div>
                                    <div class="indiMina_title">{{ item.targetDescribe }}</div>
                                    <el-collapse>
                                        <el-collapse-item title="量规">
                                            <el-table :data="item.gaugeList">
                                                <el-table-column type="index" label="序号" width="52" align="center" />
                                                <el-table-column prop="sectionDown" label="量规区间">
                                                    <template #default="scope">
                                                        <el-form-item
                                                            :prop="'gaugeList.' + scope.$index + '.sectionDown'"
                                                            :rules="{ required: true, trigger: 'blur' }"
                                                            :show-message="false">
                                                            <el-input v-model="scope.row.sectionDown" disabled
                                                                style="width: 50px" />
                                                        </el-form-item>
                                                        <span style="margin: 0 4px;">~</span>
                                                        <el-form-item :prop="'gaugeList.' + scope.$index + '.sectionUp'"
                                                            :rules="{ required: true, trigger: 'blur' }"
                                                            :show-message="false">
                                                            <el-input v-model="scope.row.sectionUp" disabled
                                                                style="width: 50px" />
                                                        </el-form-item>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="gaugeList" label="结论" width="110">
                                                    <template #default="scope">
                                                        <el-form-item
                                                            :prop="'gaugeList.' + scope.$index + '.conclusion'"
                                                            :rules="{ required: true, trigger: 'blur' }"
                                                            :show-message="false">
                                                            <el-input v-model="scope.row.conclusion" disabled
                                                                style="width: 80px" />
                                                        </el-form-item>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="value" label="分值(%)" width="80">
                                                    <template #default="scope">
                                                        <el-form-item :prop="'gaugeList.' + scope.$index + '.value'"
                                                            :rules="{ required: true, trigger: 'blur' }"
                                                            :show-message="false">
                                                            <el-input v-model="scope.row.value" disabled
                                                                style="width: 50px" />
                                                        </el-form-item>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-collapse-item>
                                    </el-collapse>
                                </div>
                            </div>
                        </el-form>
                    </div>
                    <div class="temporary" v-else>
                        <img src="../../../assets/icons/svg/vacancy.svg" />
                        <span>暂无指标</span>
                    </div>
                </div>
            </div>
            <div class="temporary" v-else>
                <img src="../../../assets/icons/svg/vacancy.svg" />
                <span>暂无指标</span>
            </div>
        </div>
        <!-- 新增维度弹窗 -->
        <PublicDialog v-model:visible="dimenType" :title="dimeneditType ? '编辑维度' : '新增维度'" :width="'500'"
            @cancelCb="resetQuery('dimenRef')" @confirmCb="confirmCb(dimenRef)">
            <div class="form-box">
                <el-form :model="dimenDate" ref="dimenRef" label-width="90px" :rules="rules">
                    <el-form-item label="维度名称" prop="wdName">
                        <el-input v-model="dimenDate.wdName" placeholder="请输入维度名称" clearable />
                    </el-form-item>
                    <el-form-item label="维度权重" prop="wdWeight">
                        <el-input v-model="dimenDate.wdWeight" @input="handleInput($event)" placeholder="请输入维度权重">
                            <template #suffix>%</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
        </PublicDialog>
    </div>
</template>
<script setup>
const props = defineProps({
    modelWdList: {
        type: Object,
        default: () => { },
    },
    treedata: {
        type: Object,
        default: () => { },
    }, //指标树
})
const { modelWdList, treedata } = toRefs(props);
const { proxy } = getCurrentInstance();
import PublicTree from '../../../components/common/PublicTree.vue'; //树型组件
import PublicDialog from '../../../components/common/PublicDialog.vue'; //弹窗组件
const treeRef = ref()
const checkedAll = ref([]); //指标数默认勾选项
// -------- 新增维度弹窗参数 -------------
const dimenType = ref(false) //新增维度弹窗状态
const dimeneditType = ref(false) //编辑维度弹窗状态
const modelWdIndex = ref(null) //编辑修改项下标
const dimenRef = ref()
// ------- 操作列表 ------
const operateList = ref([
    { value: '0', label: '编辑' },
    { value: '1', label: '删除' }
])
const weightNum = computed(() => modelWdList.value.reduce((accumulator, currentItem) => accumulator + Number(currentItem.wdWeight), 0)); // 维度权重合计
const sionatype = ref(null) //维度选中项
const defaultProps = ref({ children: "targetList", label: "targetName" }) //客观指标树配置项
const targetTableRef = ref()
const weightTotal = computed(() => modelWdList.value[sionatype.value].targetList.reduce((accumulator, currentItem) => accumulator + Number(currentItem.targetWeight), 0)); // 权重合计


const data = reactive({
    dimenDate: {
        wdName: undefined, //维度名称
        wdWeight: undefined, //维度权重
        targetList: [], //维度指标列表
    }, //新增维度表单
    rules: {
        wdName: [{ required: true, message: "维度名称不能为空", trigger: "change" }],
        wdWeight: [{ required: true, message: "维度权重不能为空", trigger: "change" }],
    },

})
const { dimenDate, rules } = toRefs(data)

// 点击新增维度
const dimensionBtn = () => {
    dimeneditType.value = false;
    dimenType.value = true;
}

// 校验输入框
const handleInput = (val) => { dimenDate.value.wdWeight = val.replace(/[^\d]/g, '') }

// 新增 编辑维度弹窗点击确定
const confirmCb = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
            if (!dimeneditType.value) { //新增
                if (Number(dimenDate.value.wdWeight) > 100) {
                    return proxy.$modal.msgWarning("维度权重不能大于100")
                } else if (weightNum.value + Number(dimenDate.value.wdWeight) > 100) {
                    return proxy.$modal.msgWarning("权重合计不能大于100")
                } else {
                    dimenDate.value.targetList = [];
                    dimenDate.value.wdType = '01';
                    modelWdList.value.push({ ...dimenDate.value });
                    dimenType.value = false;
                    resetQuery('dimenRef');
                    proxy.$modal.msgSuccess("新增成功");
                }
            } else { //编辑
                if (Number(dimenDate.value.wdWeight) > 100) {
                    return proxy.$modal.msgWarning("维度权重不能大于100")
                }
                if (weightNum.value !== 0) {
                    if ((weightNum.value - modelWdList.value[modelWdIndex.value].wdWeight) + Number(dimenDate.value.wdWeight) > 100) {
                        return proxy.$modal.msgWarning("权重合计不能大于100")
                    }
                } else {
                    if (weightNum.value + Number(dimenDate.value.wdWeight) > 100) {
                        return proxy.$modal.msgWarning("权重合计不能大于100")
                    }
                }
                modelWdList.value[modelWdIndex.value].wdName = dimenDate.value.wdName;
                modelWdList.value[modelWdIndex.value].wdWeight = dimenDate.value.wdWeight;
                dimenType.value = false;
                resetQuery('dimenRef');
                proxy.$modal.msgSuccess("编辑成功");
            }
        }
    });
}

// 点击操作按钮
const handleCommand = (event, index) => {
    modelWdIndex.value = index;
    if (event == '0') {  //编辑
        dimenDate.value = JSON.parse(JSON.stringify(modelWdList.value[index]));
        dimeneditType.value = true;
        dimenType.value = true;
    } else {  //删除
        modelWdList.value.splice(index, 1);
        sionatype.value = null;
        proxy.$modal.msgSuccess("删除成功")
    }
}

// 点击维度列表
const modelWdBtn = (item, index) => {
    sionatype.value = index;
    nextTick(() => {
        checkedAll.value = [];
        treeRef.value.handleSelectAllChange();
        if (item.targetList.length > 0) {
            modelWdList.value[index].targetList.forEach(item => {
                checkedAll.value.push(item.targetId);
                item.checkType = true;
            })
        }
    });
}

// 客观指标库树点击复选框
const checkClick = (node, data) => {
  if (!node.stairType) {
    // 处理叶子节点
    node.checkType = !node.checkType;
    const isChecked = data.checkedKeys.some(item => item == node.targetId);
    if (isChecked) {
      if (!modelWdList.value[sionatype.value].targetList.some(item => item.targetId === node.targetId)) {
        modelWdList.value[sionatype.value].targetList.push(JSON.parse(JSON.stringify(node)));
      }
    } else {
      modelWdList.value[sionatype.value].targetList = modelWdList.value[sionatype.value].targetList.filter(item => item.targetId !== node.targetId);
    }
  } else {
    // 处理非叶子节点（递归处理子节点）
    const isChecked = data.checkedKeys.includes(node.targetId);
    const processNode = (currentNode, isChecked) => {
      currentNode.checkType = isChecked;
      if (currentNode.children) {
        currentNode.children.forEach(child => {
          processNode(child, isChecked);
        });
      } else {
        // 叶子节点处理
        if (isChecked) {
          if (!modelWdList.value[sionatype.value].targetList.some(item => item.targetId === currentNode.targetId)) {
            modelWdList.value[sionatype.value].targetList.push(JSON.parse(JSON.stringify(currentNode)));
          }
        } else {
          modelWdList.value[sionatype.value].targetList = modelWdList.value[sionatype.value].targetList.filter(item => item.targetId !== currentNode.targetId);
        }
      }
    };
    processNode(node, isChecked);
    // 更新父节点状态
    node.checkType = isChecked;
  }
}

// 点击量规权重输入框校验
const targetWeightInput = (val, index) => { modelWdList.value[sionatype.value].targetList[index].targetWeight = val.replace(/[^\d]/g, '') }
const targetWeighChange = (event, index) => {
    if (Number(event) > 100) {
        modelWdList.value[sionatype.value].targetList[index].targetWeight = '';
        return proxy.$modal.msgWarning(`权重不可大于100`);
    } else {
        if (weightTotal.value > 100) {
            modelWdList.value[sionatype.value].targetList[index].targetWeight = '';
            return proxy.$modal.msgWarning(`权重合计不可大于100`);
        }
    }
}

// 表单重置事件
const resetQuery = (formEl) => { proxy.resetForm(formEl) }
</script>
<style scoped leng="sass">
/* 模型设计样式 */
.macro {
    height: calc(100% - 50px);
    display: flex;

    .macro_left {
        width: 264px;
        height: 100%;
        padding: 20px;
        border-right: 1px solid #F2F3F5;
        display: flex;
        flex-direction: column;

        .sionality {
            width: 225px;
            min-height: 36px;
            border-radius: 4px;
            background: #0084FF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: normal;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .sionaBox {
            width: 100%;
            flex: 1;
            overflow: auto;
        }

        .sionafoot {
            width: 100%;
            min-height: 36px;
            background: #E8FFEA;
            padding: 0 10px;
            margin-top: 10px;
            font-size: 14px;
            font-weight: normal;
            color: #009A29;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .sionalist {
        width: 100%;
        height: 36px;
        padding: 7px 10px;
        font-size: 14px;
        font-weight: bold;
        color: #4E5969;
        border-radius: 4px;
        margin-bottom: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .sionalist>div {
        display: flex;
        align-items: center;
    }

    .sionalist>div:nth-child(1) span:nth-child(1) {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        display: block;
        background-color: #86909C;
        margin: 10px;
    }

    .sionalist:hover {
        background: linear-gradient(0deg, rgba(0, 132, 255, 0.06), rgba(0, 132, 255, 0.06)), #FFFFFF;
    }

    .sionapitch {
        color: #0084FF;
        background: linear-gradient(0deg, rgba(0, 132, 255, 0.06), rgba(0, 132, 255, 0.06)), #FFFFFF;
    }

    .sionapitch>div:nth-child(1) span:nth-child(1) {
        background-color: #0084FF;
    }

    .macro_right {
        width: calc(100% - 264px);
        height: 100%;
        display: flex;
    }
}

.measure {
    width: 260px;
    height: 100%;
    padding: 20px;
    overflow: auto;
    border-right: 1px solid #F2F3F5;
}

.selecdex {
    width: calc(100% - 260px);
    height: 100%;
}

.indiBox {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: auto;
}

.indiBox-top {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.indiBox-top>div:nth-child(1) {
    font-size: 16px;
    font-weight: bold;
    color: #1D2129;
}

.indiBox-top>div:nth-child(2) {
    width: 176px;
    height: 36px;
    font-size: 14px;
    font-weight: normal;
    color: #009A29;
    border-radius: 4px;
    background: #E8FFEA;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.indiMina {
    width: 100%;
    column-count: 2;
    column-gap: 16px;

    /* 控件样式 */
    :deep(.el-collapse) {
        border: none;
        padding: 0 16px;
    }

    :deep(.el-collapse-item__header) {
        border: none;
        background-color: rgba(243, 249, 255, 0.2);
        font-size: 14px;
        font-weight: normal;
        color: #1D2129;
    }

    :deep(.el-collapse-item__content) {
        padding: 0px;
    }

    /* 表格控件样式 */
    :deep(.el-form-item--default) {
        display: inline-block;
        margin-bottom: 0px;
    }

    :deep(.el-form-item__content) {
        margin-left: 0px !important;
    }
}

.indiMina>div {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 16px;
    background: rgba(243, 249, 255, 0.5);
    overflow: auto;
}

.indiMina_header {
    height: 56px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #1D2129;
    }

    >div:nth-child(2) {
        width: 130px;
        font-size: 14px;
        font-weight: normal;
        color: #1D2129;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.indiMina_title {
    font-size: 12px;
    font-weight: normal;
    color: #86909C;
    margin: 0 16px 16px 16px;
}

.temporary {
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #86909C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img {
        width: 160px;
        height: 160px;
    }

    span {
        font-size: 20px;
        font-weight: normal;
        color: #7FC1FF;
    }
}

.surplus {
    margin-left: 10px;
}
</style>我现在要它实现点击树形菜单中的指标库，点击父节点时，会将下面的子节点全部push进数组，然后展示到右边的已选指标